<!--
@description：点餐订单
@author: whw
@date: 2021/6/23
-->
<template>
  <div class="order-index-main">
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchTask" class="user-search">
      <el-form-item>
        <el-date-picker
          v-model="searchTime"
          type="date"
          placeholder="选择日期"
          @change="changeTime"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchTask.storeId"
          placeholder="请选择商家"
          clearable
        >
          <el-option
            v-for="store in stores"
            :key="store.storeId"
            :label="store.storeName"
            :value="store.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchTask.taskTitle"
          placeholder="输入标题搜索..."
          clearable
          @keydown.enter.native="search"
          @keydown.esc.native="clearInput"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="startButton" @click="openStartOrderDialog()">发起点餐</el-button>
      </el-form-item>
    </el-form>
    <!--        还缺一个订单状态的判断！！-->
    <el-table
      :data="taskList.records"
      border
      style="overflow:auto;width: 100%"
    >
      <el-table-column
        align="center"
        prop="taskTitle"
        sortable
        label="标题"
        width="300"
      >
        <template slot-scope="scope">
          <el-link type="primary" @click="openOrderDialog(scope.row.taskId)">{{ scope.row.taskTitle }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="storeName"
        label="商家"
        width="200"
      />
      <!-- 该字段是在获取数据时，新增的一个范围字段，数据库中不存在 -->
      <el-table-column
        align="center"
        prop="range"
        label="时间"
        sortable
        width="180"
      />
      <!--      <el-table-column-->
      <!--        class="taskId"-->
      <!--        align="center"-->
      <!--        prop="taskId"-->
      <!--        label="订单号"-->
      <!--      >-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tooltip class="item" effect="dark" content="点击复制" placement="top">-->
      <!--            <span style="text-decoration: underline;cursor: pointer" @click="copyTaskId(scope.row.taskId)">{{ scope.row.taskId }}</span>-->
      <!--          </el-tooltip>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        align="center"
        prop="nickName"
        label="发起人"
        width="150"
      />
      <el-table-column
        align="center"
        prop="totalPerson"
        label="参与人数"
        width="120"
      />
      <el-table-column
        align="center"
        prop="totalPrice"
        label="总价格(元)"
        width="120"
      >
        <template slot-scope="scope">
          <span style="font-size: 14px;color: red;font-weight: bold">{{ scope.row.totalPrice.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="avgPrice"
        label="人均价格(元)"
        width="120"
      >
        <template slot-scope="scope">
          <span style="font-size: 14px;color: red;font-weight: bold">{{ scope.row.avgPrice.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="订单状态"
        width="120"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.status == 0" style="color: green">进行中</p>
          <p v-if="scope.row.status == 1" style="color: red;">已结束</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-link v-if="scope.row.status == 0" icon="el-icon-edit" type="primary" @click="openUpdateTimeDialog(scope.row.taskId)">修改时间</el-link>
              &nbsp;&nbsp;
          <el-link type="danger" icon="el-icon-delete" @click="deleteTask(scope.row.taskId)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="taskList.current"
        :page-sizes="[15, 20, 50]"
        :page-size="taskList.size"
        layout="sizes, prev, pager, next"
        :total="taskList.total"
        :hide-on-single-page="hide"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情页面 -->
    <orderInfoDialog
      v-if="orderDialogVisible"
      :order-dialog-visible="orderDialogVisible"
      :task-id="taskId"
      @close="closeOrderInfoDialog"
    />
    <!-- 发起点餐页面 -->
    <startOrderDialog
      :start-order-dialog-visible="startOrderDialogVisible"
      :default-task-title="defaultTaskTitle"
      @close="closeStartOrderDialog"
    />
    <!-- 修改时间页面 -->
    <updateTimeDialog
      v-if="updateTimeVisible"
      :update-time-visible="updateTimeVisible"
      :task-id="taskId"
      @close="closeUpdateOrderDialog"
    />
  </div>
</template>

<script>
import startOrderDialog from './startOrderDialog'
import orderInfoDialog from './orderInfoDialog'
import updateTimeDialog from './updateTimeDialog'
// import personInfoDialog from './personInfoDialog'
import { getPageListByUser, deleteTask, getDefaultTaskTitle } from '@/api/meal/task'
import { list as listStore } from '@/api/basic/store'

export default {
  name: 'MealOrder',
  components: {
    orderInfoDialog,
    startOrderDialog,
    updateTimeDialog
    // personInfoDialog
  },
  data() {
    return {
      orderDialogVisible: false,
      startOrderDialogVisible: false,
      updateTimeVisible: false,
      // personInfoVisible: false,
      taskList: [],
      searchTime: null,
      // 商家搜索参数
      stores: [],
      // 用户搜索参数
      users: [],
      // 任务列表查询参数
      searchTask: {
        pageSize: 15,
        pageIndex: 1,
        time: null,
        searchKey: null,
        storeId: null,
        taskTitle: null
      },
      taskId: null,
      status: false,
      // 传给子页面的订单数据
      orderData: null,
      defaultTaskTitle: null,
      // 只有一页时分页隐藏
      hide: true

    }
  },
  mounted() {
    // 加载该点餐员所有已发布任务列表
    this.getPageListByUser()
  },
  methods: {
    // 清空搜索框
    clearInput() {
      this.searchTask.taskTitle = null
    },
    // 点击拷贝点餐码
    copyTaskId(taskId) {
      const copyData = taskId
      const oInput = document.createElement('input')
      oInput.value = copyData
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
      this.$message.success('复制成功')
    },
    // 改变页大小
    handleSizeChange(val) {
      this.searchTask.pageSize = val
      this.getPageListByUser()
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.searchTask.pageIndex = val
      this.getPageListByUser()
    },
    // 搜索
    search() {
      // 获取订单分页列表
      getPageListByUser(this.searchTask).then(res => {
        if (res.code === 200) {
          this.taskList = res.data
          this.taskList.records.forEach(function(list, index) {
            list.range = list.createTime + ' ~ ' + list.endTime
          })
        }
      })
    },
    // 时间参数
    changeTime() {
      // 搜索时间改变传值
      if (this.searchTime) {
        this.searchTask.time = this.searchTime
      } else {
        this.searchTask.time = null
      }
    },
    // 打开订单详情页面
    openOrderDialog(taskId) {
      this.orderDialogVisible = true
      this.taskId = taskId
    },
    // 打开发起订单页面
    openStartOrderDialog() {
      getDefaultTaskTitle().then(res => {
        if (res.code === 200) {
          this.defaultTaskTitle = res.data
        }
      })
      this.startOrderDialogVisible = true
    },
    // 打开修改时间页面
    openUpdateTimeDialog(taskId) {
      this.taskId = taskId
      this.updateTimeVisible = true
    },
    // 关闭详情页面
    closeOrderInfoDialog() {
      this.orderDialogVisible = false
    },
    // 关闭发起点餐页面
    closeStartOrderDialog(isRefresh) {
      this.startOrderDialogVisible = false
      if (isRefresh) {
        this.getPageListByUser()
      }
    },
    // 关闭修改时间页面
    closeUpdateOrderDialog(isRefresh) {
      this.updateTimeVisible = false
      if (isRefresh) {
        this.getPageListByUser()
      }
    },
    // 页面加载时初始化订单和搜索参数信息
    getPageListByUser() {
      // 获取商家搜索参数
      listStore().then(res => {
        if (res.code === 200) {
          this.stores = res.data
        }
      })
      // 获取订单分页列表
      getPageListByUser(this.searchTask).then(res => {
        if (res.code === 200) {
          this.taskList = res.data
          this.taskList.records.forEach(function(list) {
            list.range = list.createTime + ' ~ ' + list.endTime
          })
        }
      })
    },
    // 删除还没开始点餐的任务
    deleteTask(taskId) {
      this.taskId = taskId
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteTask({ taskId: this.taskId })
            .then(res => {
              if (res.code === 200) {
                this.$message.success('删除成功!')
                this.getPageListByUser()
              }
            })
        })
    }
  }
}
</script>

<style scoped>
.order-index-main {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
  margin-left: 10px;
}
.startButton {
   margin-right: 95%;
}
.user-search {
  margin-top: 20px;
}
.code:hover {
  cursor: pointer;
}
.el-link {
  font-size: 12px;
}
</style>
